<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content=" Zoe" />
<meta name="Copyright" content="" />
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>我的购物车</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<link rel="icon" href="images/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="css/styles.css" type="text/css">
<link rel="stylesheet" href="css/style_2.css" media="screen" type="text/css" />
<!--必要样式-->
<link href="css/style_1.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery.min_1.js"></script>
<script type="text/javascript" src="js/script_1.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script src="https://how2j.cn/study/vue.min.js"></script>
<script src="https://how2j.cn/study/fetch.min.js"></script>
</head>
<body>
<div class="wrap bc">
  <div class="title tc pr top"> <span class="back-btn"></span>我的购物车
    <div class="nav-btn">
      <ul class="pa">

      </ul>
    </div>
  </div>
  <div class="list" id="cartId">
    <ul>
      <li  v-for="data in result.list">
        <img :src="data.food.remark">
        <h1>{{data.food.name}}</h1>
        <h1>单价: {{data.food.price}}</h1>
        <h1>数量: {{data.size}}</h1>
        <h1>小计: {{data.subTotal}}</h1>
        <div align="right">
        </div>
      </li>
    </ul>
    <h1 style="color: #0C0C0C">总计:{{result.total}}</h1>
    <h1 style="color: #0C0C0C">折后加:{{result.discountTotal}}</h1>
    <button v-on:click="generateOrder()">生成订单</button>
  </div>

</div>

<script type="application/javascript">
  var url = "/Fore/cart/list";
  new Vue({
    el:'#cartId',
    data:{
      result:[]
    },
    mounted:function(){ //mounted　表示这个 Vue 对象加载成功了
      self=this
      fetch(url).then(function(response) {
        response.json().then(function (jsonObject) {
          self.result = jsonObject
        })
      })
    },methods:{
      generateOrder:function () {
          fetch("/Fore/order/generate").then(function(response) {
            alert("订单已生成!");
          })
      }
    }
  })
</script>



<script type="text/javascript" src="js/script.js"></script>
<style type="text/css">
.top_bar{position:fixed;z-index:900;bottom:-1px;left:0;right:0;}
.top_menu{
	border-top:1px solid #b3b3b3;width:100%;height:40px;margin:0;padding:0;
	
	background:rgba(255, 255, 255, 0.7);
	background:-webkit-gradient(linear, 0 0, 0 100%, from(#e7e4e7), to(#b9b9b9));
	background:-o-gradient(linear, 0 0, 0 100%, from(#e7e4e7), to(#b9b9b9));
	background:gradient(linear, 0 0, 0 100%, from(#e7e4e7), to(#b9b9b9));
}
.top_bar .top_menu>li{
	position:relative;text-align:center;display:inline-block;width:25%;float:left;
	
	background:-webkit-gradient(linear, 0 0, 0 100%, from(rgba(0, 0, 0, 0.1)), color-stop(50%, rgba(0, 0, 0, 0.2)), to(rgba(0, 0, 0, 0.2))), -webkit-gradient(linear, 0 0, 0 100%, from(rgba(255, 255, 255, 0.1)), color-stop(50%, rgba(255, 255, 255, 0.3)), to(rgba(255, 255, 255, 0.1)));
	background:-o-gradient(linear, 0 0, 0 100%, from(rgba(0, 0, 0, 0.1)), color-stop(50%, rgba(0, 0, 0, 0.2)), to(rgba(0, 0, 0, 0.2))), -o-gradient(linear, 0 0, 0 100%, from(rgba(255, 255, 255, 0.1)), color-stop(50%, rgba(255, 255, 255, 0.3)), to(rgba(255, 255, 255, 0.1)));
	background:gradient(linear, 0 0, 0 100%, from(rgba(0, 0, 0, 0.1)), color-stop(50%, rgba(0, 0, 0, 0.2)), to(rgba(0, 0, 0, 0.2))), gradient(linear, 0 0, 0 100%, from(rgba(255, 255, 255, 0.1)), color-stop(50%, rgba(255, 255, 255, 0.3)), to(rgba(255, 255, 255, 0.1)));
}
.top_bar .top_menu li a label{padding:3px 0 0 3px;font-size:12px;overflow:hidden;}
.top_menu>li:first-child{background:none;}
.top_bar .top_menu>li>a{height:40px;line-height:40px;display:block;text-align:center;color:#4f4d4f;text-shadow:0 1px rgba(255, 255, 255, 0.3);text-decoration:none;border-top:1px solid #f9f9f9;}
.top_bar .top_menu>li>a p{overflow:hidden;margin:0 0 0 0;font-size:12px;display:block!important;line-height:18px;text-align:center;}
.top_bar .top_menu>li>a img{padding:0;height:20px;width:20px;color:#fff;line-height:40px;vertical-align:middle;}
.top_bar .top_menu>li>a:hover,.top_bar .top_menu>li>a:active{background-color:#CCCCCC;}
</style>

<div style="text-align:center;clear:both;">
  <script src="/gg_bd_ad_720x90.js" type="text/javascript"></script> 
  <script src="/follow.js" type="text/javascript"></script> 
</div>
<div class="top_bar">
  <nav>
    <ul id="top_menu" class="top_menu">
      <li><a href="index.html"><img src="images/plugmenu6.png">
        <label>菜单</label>
      </a></li>
      <li><a href="mypocket.html"><img src="images/plugmenu8.png">
        <label>购物车</label>
      </a></li>
      <li><a href="personal.html"><img src="images/person.png">
        <label>个人中心</label>
      </a></li>
      <li><a href="#"><img>
        <label>餐厅介绍</label>
      </a></li>
    </ul>
  </nav>
</div>
</body>
</html>